<template>
	<div>
		<van-row>
			<!--左侧分类-->
			<van-col span="6">
				<van-sticky :offset-top="46">
					<van-sidebar v-model="activeKey">
						<van-sidebar-item v-for="(item,i) in categoryList" :title="item.name" @click="onClickLeftMenus(item.id)" />
					</van-sidebar>
				</van-sticky>
			</van-col>
			<!-- 右侧商品列表 -->
			<van-col span="18">
				<!-- 下拉刷新组件 -->
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<!-- 列表组件 -->
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"
						:offset="0">
						<!-- 商品卡片列表 -->
						<van-card v-for="(item,i) in productList" :key="i" :price="item.price" :num="item.sold_count"
							:desc="item.spec" :title="item.title" :thumb=" APIDomainName + item.pic"
							@click="onDetail(item.id)"></van-card>
					</van-list>
				</van-pull-refresh>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	//1.导入封装后的接口  
	import { getProductListAPI } from "@/api/product.js";
	import { getCategoryListAPI } from "@/api/category.js"

	export default {
		data() {
			return {
				productList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表
				category_id: null,

				//左侧 导航栏
				activeKey: 0,

				pageIndex: 0, //页码
				pageSize: 8, //页大小
				pageTotal: 0, //总页数

				/* 上拉加载状态控制变量	 */
				loading: false,
				finished: false,

				//下拉刷新状态控制变量
				refreshing: false,
			}
		},

		//生命周期的钩子函数
		created() {
			// 获取左侧导航的分类内容
			getCategoryListAPI().then(result => {
				console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.onRefresh(); // 刷新
			});
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.pageIndex = 0; //重置页码        
				this.finished = false; //重置未完成
				this.refreshing = true;
				// 重新加载数据,将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},

			// 上拉加载每次1页
			onLoad() {
				// 异步更新数据
				this.pageIndex += 1; //页码递增
				let category_id = this.category_id; //商品分类id
				let pageIndex = this.pageIndex;
				let pageSize = this.pageSize; //页大小       
				getProductListAPI({
					category_id,
					pageIndex,
					pageSize
				}).then((result) => {
					console.log(result); //调式输出，看数据结构
					this.pageTotal = result.pageTotal; //总页数

					//如果是正在下拉刷新中
					if (this.refreshing) {
						this.productList = []; //清空
						this.refreshing = false;
					}

					if (result.data.length > 0) {
						this.productList = this.productList.concat(result.data); //数据拼接
					}

					// 设置本次上拉加载状态结束
					this.loading = false;

					// 判断是否数据全部加载完成
					if (this.pageIndex >= this.pageTotal) {
						this.finished = true;
					}
				});
			},

			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.category_id = category_id; //更新分类id
				this.onRefresh(); //刷新
			},

			// 导航跳转到商品详情页面
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					query: { id },
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.van-sidebar {
		width: 100px;
	}

	.van-sidebar-item {
		padding: 10px;
	}

	/deep/.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}
</style>